<template>
    <view>
        <!--标题和返回-->
		<cu-custom :bgColor="NavBarColor" isBack :backRouterName="backRouteName">
			<block slot="backText">返回</block>
			<block slot="content">安装订单</block>
		</cu-custom>
		 <!--表单区域-->
		<view>
			<form>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">客户名称<text class="required-star">*</text></view>
                  <input  placeholder="请输入客户名称" v-model="model.customerName"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">联系人<text class="required-star">*</text></view>
                  <input  placeholder="请输入联系人" v-model="model.contacts"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">联系电话<text class="required-star">*</text></view>
                  <input  placeholder="请输入联系电话" v-model="model.telephone"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">上门地址<text class="required-star">*</text></view>
                  <input  placeholder="请输入上门地址" v-model="model.homeAddress"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">详细地址</view>
                  <input  placeholder="请输入详细地址" v-model="model.address"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">车牌号<text class="required-star">*</text></view>
                  <input  placeholder="请输入车牌号" v-model="model.licensePlate"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">工单描述<text class="required-star">*</text></view>
                  <input  placeholder="请输入工单描述" v-model="model.description"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title">服务时间<text class="required-star">*</text></view>
                  <my-date label="" v-model="model.serviceTime" placeholder="请选择服务时间"></my-date>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">服务人员</text></view>
                  <input  placeholder="请输入服务人员" v-model="model.serviceStaff"/>
                </view>
              </view>
			  <view class="cu-form-group">
				  <view class="flex align-center">
					<view class="title"><text space="ensp">业务员</text></view>
					<input  placeholder="请输入业务员" v-model="model.salesman"/>
				  </view>
				</view>
				<view class="cu-form-group">
				  <view class="flex align-center">
					<view class="title"><text space="ensp">业户名称</text></view>
					<input  placeholder="请输入业户名称" v-model="model.nameBusinessOwner"/>
				  </view>
				</view>
				<view class="cu-form-group">
					<view class="title"><text space="ensp">行驶证照片</text></view>
					<!-- <input  placeholder="请输入行驶证照片" v-model="model.photoDrivingLicense"/> -->
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						 <image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red radius" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="cu-form-group">
				  <view class="flex align-center">
					<view class="title">车辆类型<text class="required-star">*</text></view>
					<radio-group v-model="model.vehicleType" @change="problemHandlingChange">
					  <label class="radio-container" v-for="(item, index) in checkboxOptions" :key="index">
						<radio :value="item.value" :checked="item.checked">{{ item.name }}</radio>
					  </label>
					</radio-group>
				  </view>
				</view>
				<view class="cu-form-group">
				  <view class="flex align-center">
					<view class="title"><text space="ensp">安装设备</text></view>
					<radio-group v-model="model.installingEquipment" @change="problemHandlingChange">
					  <label class="radio-container" v-for="(item, index) in installingEquipment" :key="index">
						<radio :value="item.value" :checked="item.checked">{{ item.name }}</radio>
					  </label>
					</radio-group>
				  </view>
				</view>
				<view class="cu-form-group">
					<view class="title"><text space="ensp">批量安装</text></view>
					<!-- <input  placeholder="请输入批量安装" v-model="model.batchInstallation"/> -->
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in afterImgList" :key="index" @tap="afterViewImage" :data-url="afterImgList[index]">
						 <image :src="afterImgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red radius" @tap.stop="afterDelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="afterChooseImage" v-if="afterImgList.length<1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="cu-form-group">
				  <view class="flex align-center">
					<view class="title">接入说明<text class="required-star">*</text></view>
					<checkbox-group v-model="model.accessInstructions">
						<label class="radio-container" v-for="(item, index) in accessInstructions" :key="index">
							<checkbox :value="item.value" :checked="item.checked">{{ item.name }}</checkbox>
						</label>
					</checkbox-group>
				  </view>
				</view>
				<view class="padding">
					<button class="cu-btn block bg-blue margin-tb-sm lg" @click="onSubmit">
						<text v-if="loading" class="cuIcon-loading2 cuIconfont-spin"></text>提交
					</button>
				</view>
			</form>
		</view>
    </view>
</template>

<script>
    import myDate from '@/components/my-componets/my-date.vue'

    export default {
        name: "WorkOrderForm",
        components:{ myDate },
        props:{
          formData:{
              type:Object,
              default:()=>{},
              required:false
          }
        },
        data(){
            return {
				CustomBar: this.CustomBar,
				NavBarColor: this.NavBarColor,
				loading:false,
                model: {
					workOrderType:1,
				},
                backRouteName:'index',
                url: {
                  queryById: "/work/workOrder/queryById",
                  add: "/work/workOrder/add",
                  edit: "/work/workOrder/edit",
                },
				checkboxOptions: [
					{ name: '危运车', value: '5', checked: false },
					{ name: '网约车/出租车', value: '4', checked: false },
					{ name: '公交车', value: '3', checked: false },
					{ name: '重型货车', value: '2', checked: false },
					{ name: '大型客车', value: '1', checked: false },
				],
				accessInstructions: [
					{ name: '其他转发', value: '5', checked: false },
					{ name: '中石化平台', value: '4', checked: false },
					{ name: '省油补平台', value: '3', checked: false },
					{ name: '全国货运平台', value: '2', checked: false },
					{ name: '省两客一危一重', value: '1', checked: false },
				],
				installingEquipment: [
					{ name: '锐明D5XS', value: '1', checked: false },
					{ name: '海康A3-1314', value: '2', checked: false },
					{ name: 'BSJ-KM02', value: '3', checked: false },
					{ name: 'BSJ-A6BD', value: '4', checked: false },
					{ name: 'GMS天线', value: '5', checked: false },
					{ name: 'GPS天线', value: '6', checked: false },
					{ name: '西数1T硬盘', value: '7', checked: false },
				],
				imgList: [],
				afterImgList: [],
				myFormData:{
					reviewerAutograph:'',
					afterMaintenance:'',
					outsourcingExpenses:'0',
					realname:'',
					username:'',
					sex:1,
					birthday:'',
					orgCode:'',
					workNo:'',
					phone:'',
					email:'',
					id:'',
					attendanceRecordList:[],
				},
            }
        },
        created(){
             this.initFormData();
        },
        methods:{
           initFormData(){
               if(this.formData){
                    let dataId = this.formData.dataId;
                    this.$http.get(this.url.queryById,{params:{id:dataId}}).then((res)=>{
                        if(res.data.success){
                            console.log("表单数据",res);
                            this.model = res.data.result;
                        }
                    })
                }
            },
            onSubmit() {
                let myForm = {...this.model};
                this.loading = true;
                let url = myForm.id?this.url.edit:this.url.add;
				this.$http.post(url,myForm).then(res=>{
				   console.log("res",res)
				   this.loading = false
				   this.$Router.push({name:this.backRouteName})
				}).catch(()=>{
					this.loading = false
				});
            },
			ChooseImage() {
				var that=this;
				that.myFormData.reviewerAutograph='';
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可选择视频来源
					success: (res) => {
						for(let filePath of res.tempFilePaths){
							that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
								filePath: filePath,
								name: 'file'
							})
							.then(res => {
								that.myFormData.reviewerAutograph+=res.data.message+',';
								console.log("reviewerAutograph===",that.myFormData.reviewerAutograph)
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
						}
						this.imgList = res.tempFilePaths
					}
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '召唤师',
					content: '确定要删除这段回忆吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			}
        },
		
    }
</script>
<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.radio-container {
	  /* display: block; 
	  margin-bottom: 5px;
	  margin-right: 12px;*/
	  line-height: 30px;
	}
	uni-radio-group {
	    display: inline-block;
	    width: 75%;
	}
	uni-checkbox-group {
	    display: inline-block;
	    width: 75%;
	}
	uni-switch, uni-checkbox, uni-radio {
	    position: relative;
	    width: 50%;
	}
	.required-star {
	    color: red;
	    margin-right: 5px;
	  }
</style>